<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll(){
            var all=document.getElementById("all");//DOM对象
            var inputs=document.querySelectorAll("tbody input");//集合
            if(all.checked){//说明被选中
                for(var i=0;i<inputs.length;i++){
                    inputs[i].checked=true;
                }
            }else{//说明没被选中
                for(var i=0;i<inputs.length;i++){
                    inputs[i].checked=false;
                }
            }
        }
    </script>
</head>
<body>
    <table border="1" width="800">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" onclick="checkAll()" id="all">全选
                </th>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td><input type="checkbox"></td>
                <td>1</td>
                <td>tom</td>
                <td>10</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>2</td>
                <td>alice</td>
                <td>12</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>3</td>
                <td>coco</td>
                <td>14</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>4</td>
                <td>lucy</td>
                <td>12</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>5</td>
                <td>huahua</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</body>
</html>